import React, { useEffect, useState } from 'react'
import { queryRecommend } from '@/servers/home'
import { Card, Grid, WingBlank } from 'antd-mobile'
import { DataItem } from 'antd-mobile/lib/grid/PropsType'
import { Link } from 'umi'
import styles from './index.less'
const node = ({ id, title, img }: DataItem) => {
    return <Link to={'/product/' + id}>
        <div className='oneRow'>{title}</div>
        <img src={img} alt='' className={styles.nodeImg}></img>
    </Link>
}
const Recommend = () => {
    const [list, setList] = useState([])
    useEffect(() => {
        queryRecommend().then(res => {
            const { list: { data } } = res
            setList(data)
        })
    }, [])
    console.log('list', list)
    return (
        /**
         * Grid 方格图， 一共6个数据， 每行3个
         * 
         */
        <>
            <WingBlank size='lg' className={styles.main}>
                <Card>
                    <Card.Header title='好物推荐' />
                    <Grid
                        data={list.slice(0, 6)}
                        columnNum={3}
                        renderItem={data => node({ ...data })}
                    ></Grid>
                </Card>
            </WingBlank>
            <WingBlank size='lg' className={styles.main2}>
                <Card>
                    <Card.Header title='猜你喜欢' />
                    <Grid
                        /**从6开始截取数据到最后
                         * 每行2个
                         * renderItem每个单位渲染到内容
                         */
                        data={list.slice(6)}
                        columnNum={2}
                        renderItem={data => node({ ...data })}
                    ></Grid>
                </Card>
            </WingBlank>
        </>
    )
}

export default Recommend
